<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摩斯密码大冒险 - 小小情报员训练</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'ZCOOL KuaiLe', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 50%, #45B7D1 100%);
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 装饰元素 */
        .decoration {
            position: fixed;
            pointer-events: none;
            z-index: 1;
        }

        .star {
            width: 30px;
            height: 30px;
            background: #FFD700;
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            animation: twinkle 2s infinite;
        }

        .cloud {
            width: 100px;
            height: 40px;
            background: white;
            border-radius: 50px;
            opacity: 0.8;
            animation: float 20s infinite;
        }

        .cloud::before {
            content: '';
            position: absolute;
            width: 50px;
            height: 50px;
            background: white;
            border-radius: 50%;
            top: -25px;
            left: 10px;
        }

        .cloud::after {
            content: '';
            position: absolute;
            width: 60px;
            height: 40px;
            background: white;
            border-radius: 50%;
            top: -15px;
            right: 10px;
        }

        @keyframes twinkle {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.8); }
        }

        @keyframes float {
            0%, 100% { transform: translateX(-100px); }
            50% { transform: translateX(calc(100vw + 100px)); }
        }

        /* 登录界面样式 - 完美居中 */
        .login-container {
            background: linear-gradient(135deg, #FFE66D 0%, #FF6B6B 100%);
            border-radius: 30px;
            padding: 50px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
            max-width: 450px;
            width: 100%;
            text-align: center;
            position: relative;
            z-index: 10;
            border: 5px solid white;
            animation: bounce 0.5s ease;
            margin: 0;
            transform: none;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        .login-container h1 {
            color: white;
            margin-bottom: 10px;
            font-size: 36px;
            text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
        }

        .login-container .subtitle {
            color: white;
            margin-bottom: 30px;
            font-size: 18px;
            text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
        }

        .agent-icon {
            font-size: 80px;
            margin-bottom: 20px;
            animation: wiggle 2s infinite;
        }

        @keyframes wiggle {
            0%, 100% { transform: rotate(-5deg); }
            50% { transform: rotate(5deg); }
        }

        .input-group {
            margin-bottom: 25px;
        }

        .input-group label {
            display: block;
            margin-bottom: 10px;
            color: white;
            font-weight: bold;
            font-size: 20px;
            text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
        }

        .input-group input {
            width: 100%;
            padding: 15px;
            border: 3px solid white;
            border-radius: 20px;
            font-size: 20px;
            background: rgba(255, 255, 255, 0.9);
            transition: all 0.3s;
        }

        .input-group input:focus {
            outline: none;
            transform: scale(1.05);
            box-shadow: 0 5px 20px rgba(255, 255, 255, 0.5);
        }

        .login-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 15px 50px;
            border-radius: 30px;
            font-size: 22px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            font-weight: bold;
        }

        .login-btn:hover {
            transform: translateY(-5px) scale(1.1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        }

        /* 学习单主体样式 */
        .main-container {
            background: linear-gradient(135deg, #FFE66D 0%, #FF6B6B 100%);
            border-radius: 30px;
            padding: 40px;
            max-width: 1200px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
            display: none;
            position: relative;
            z-index: 10;
            border: 5px solid white;
            animation: slideIn 0.5s ease;
            margin: 0 auto;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 30px;
            border-bottom: 5px dashed white;
        }

        .header h1 {
            color: white;
            font-size: 42px;
            margin-bottom: 15px;
            text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
        }

        .agent-info {
            background: white;
            color: #FF6B6B;
            padding: 15px 30px;
            border-radius: 25px;
            display: inline-block;
            margin-top: 15px;
            font-size: 20px;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        /* 摩斯密码表样式 */
        .morse-table {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 25px;
            padding: 30px;
            margin-bottom: 40px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .morse-table h2 {
            color: #FF6B6B;
            margin-bottom: 25px;
            text-align: center;
            font-size: 30px;
            text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
        }

        .morse-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
            gap: 15px;
        }

        .morse-item {
            background: linear-gradient(135deg, #4ECDC4 0%, #45B7D1 100%);
            padding: 15px;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s;
            border: 3px solid white;
        }

        .morse-item:hover {
            transform: translateY(-10px) rotate(5deg);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }

        .morse-letter {
            font-size: 32px;
            font-weight: bold;
            color: white;
            margin-bottom: 8px;
            text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
        }

        .morse-code {
            font-family: 'Courier New', monospace;
            font-size: 18px;
            color: white;
            font-weight: bold;
        }

        /* 练习题样式 */
        .exercise-section {
            margin-bottom: 40px;
        }

        .exercise-section h2 {
            color: white;
            margin-bottom: 25px;
            text-align: center;
            font-size: 30px;
            text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
        }

        .exercise-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
        }

        .exercise-item {
            background: rgba(255, 255, 255, 0.95);
            padding: 20px;
            border-radius: 20px;
            border: 3px solid white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s;
        }

        .exercise-item:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }

        .exercise-item label {
            display: block;
            margin-bottom: 10px;
            color: #FF6B6B;
            font-weight: bold;
            font-size: 18px;
        }

        .exercise-item input {
            width: 100%;
            padding: 12px;
            border: 3px solid #4ECDC4;
            border-radius: 15px;
            font-size: 16px;
            background: white;
            transition: all 0.3s;
        }

        .exercise-item input:focus {
            outline: none;
            border-color: #FF6B6B;
            transform: scale(1.02);
        }

        /* 自由发挥部分 */
        .creative-section {
            background: linear-gradient(135deg, #FFE66D 0%, #FFA500 100%);
            padding: 30px;
            border-radius: 25px;
            margin-bottom: 40px;
            border: 5px solid white;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .creative-section h2 {
            color: white;
            margin-bottom: 20px;
            font-size: 30px;
            text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
        }

        .creative-section p {
            color: white;
            font-size: 18px;
            margin-bottom: 15px;
            text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
        }

        .creative-section textarea {
            width: 100%;
            min-height: 150px;
            padding: 20px;
            border: 3px solid white;
            border-radius: 20px;
            font-size: 18px;
            resize: vertical;
            background: rgba(255, 255, 255, 0.9);
            font-family: 'ZCOOL KuaiLe', sans-serif;
        }

        /* 文件上传部分 */
        .upload-section {
            background: linear-gradient(135deg, #4ECDC4 0%, #45B7D1 100%);
            padding: 30px;
            border-radius: 25px;
            margin-bottom: 40px;
            border: 5px solid white;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .upload-section h2 {
            color: white;
            margin-bottom: 20px;
            font-size: 30px;
            text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
        }

        .file-upload {
            border: 5px dashed white;
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            background: rgba(255, 255, 255, 0.1);
        }

        .file-upload:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.02);
        }

        .file-upload input[type="file"] {
            display: none;
        }

        .file-upload-label {
            font-size: 24px;
            color: white;
            font-weight: bold;
            text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
        }

        .file-name {
            margin-top: 15px;
            color: white;
            font-size: 18px;
            font-weight: bold;
        }

        /* 提交按钮 */
        .submit-section {
            text-align: center;
            margin-top: 50px;
        }

        .submit-btn {
            background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
            color: white;
            border: none;
            padding: 20px 60px;
            border-radius: 40px;
            font-size: 24px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            font-weight: bold;
            border: 5px solid white;
        }

        .submit-btn:hover {
            transform: translateY(-5px) scale(1.1);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        }

        /* 成功提示 */
        .success-message {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(135deg, #FFE66D 0%, #FF6B6B 100%);
            padding: 50px;
            border-radius: 30px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            text-align: center;
            display: none;
            z-index: 1000;
            border: 5px solid white;
        }

        .success-message h2 {
            color: white;
            font-size: 36px;
            margin-bottom: 20px;
            text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
        }

        .success-message p {
            color: white;
            font-size: 20px;
            text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
        }

        .success-icon {
            font-size: 80px;
            margin-bottom: 20px;
            animation: bounce 1s infinite;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 999;
        }

        /* 彩虹边框动画 */
        .rainbow-border {
            position: relative;
        }

        .rainbow-border::before {
            content: '';
            position: absolute;
            inset: -5px;
            border-radius: inherit;
            padding: 5px;
            background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            animation: rainbow 3s linear infinite;
        }

        @keyframes rainbow {
            0% { filter: hue-rotate(0deg); }
            100% { filter: hue-rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- 装饰元素 -->
    <div class="decoration star" style="top: 10%; left: 10%;"></div>
    <div class="decoration star" style="top: 20%; right: 15%; animation-delay: 0.5s;"></div>
    <div class="decoration star" style="bottom: 30%; left: 5%; animation-delay: 1s;"></div>
    <div class="decoration star" style="bottom: 20%; right: 10%; animation-delay: 1.5s;"></div>
    <div class="decoration cloud" style="top: 10%; left: -100px;"></div>
    <div class="decoration cloud" style="top: 60%; right: -100px; animation-delay: 10s;"></div>

    <!-- 登录界面 - 完美居中 -->
    <div class="login-container" id="loginContainer">
        <div class="agent-icon">🕵️‍♂️</div>
        <h1>小小情报员登录</h1>
        <p class="subtitle">请输入您的五位信息员编号</p>
        <div class="input-group">
            <label for="agentId">🔢 信息员编号</label>
            <input type="text" id="agentId" placeholder="请输入5位数字" maxlength="5" pattern="[0-9]{5}">
        </div>
        <button class="login-btn" onclick="login()">🚀 开始学习</button>
    </div>

    <!-- 学习单主体 -->
    <div class="main-container" id="mainContainer">
        <div class="header">
            <h1>🔑 摩斯密码大冒险</h1>
            <div class="agent-info">
                🕵️‍♂️ 信息员编号：<span id="displayAgentId"></span>
            </div>
        </div>

        <!-- 摩斯密码表 -->
        <div class="morse-table">
            <h2>📡 A-Z 摩斯密码对照表</h2>
            <div class="morse-grid" id="morseGrid"></div>
        </div>

        <!-- 练习题部分 -->
        <div class="exercise-section">
            <h2>✏️ 练习题：字母转摩斯密码</h2>
            <div class="exercise-grid" id="letterToMorse"></div>
        </div>

        <div class="exercise-section">
            <h2>✏️ 练习题：摩斯密码转字母</h2>
            <div class="exercise-grid" id="morseToLetter"></div>
        </div>

        <!-- 自由发挥部分 -->
        <div class="creative-section">
            <h2>🎨 自由发挥</h2>
            <p>请用摩斯密码写一句你想说的话，或者设计一个有趣的摩斯密码游戏：</p>
            <textarea id="creativeText" placeholder="在这里写下你的创意..."></textarea>
        </div>

        <!-- 文件上传部分 -->
        <div class="upload-section">
            <h2>💻 提交你的摩斯密码转换程序</h2>
            <div class="file-upload" onclick="document.getElementById('fileInput').click()">
                <input type="file" id="fileInput" accept=".py,.js,.html,.txt" onchange="handleFileSelect(event)">
                <div class="file-upload-label">📁 点击选择文件</div>
                <div class="file-name" id="fileName">未选择文件</div>
            </div>
        </div>

        <!-- 提交按钮 -->
        <div class="submit-section">
            <button class="submit-btn" onclick="submitAll()">🎉 提交学习单</button>
        </div>
    </div>

    <!-- 成功提示 -->
    <div class="overlay" id="overlay"></div>
    <div class="success-message" id="successMessage">
        <div class="success-icon">🎊</div>
        <h2>提交成功！</h2>
        <p>你的学习单已成功提交，继续加油！</p>
    </div>

    <script>
        // 摩斯密码对照表
        const morseCode = {
            'A': '.-', 'B': '-...', 'C': '-.-.', 'D': '-..', 'E': '.',
            'F': '..-.', 'G': '--.', 'H': '....', 'I': '..', 'J': '.---',
            'K': '-.-', 'L': '.-..', 'M': '--', 'N': '-.', 'O': '---',
            'P': '.--.', 'Q': '--.-', 'R': '.-.', 'S': '...', 'T': '-',
            'U': '..-', 'V': '...-', 'W': '.--', 'X': '-..-', 'Y': '-.--',
            'Z': '--..'
        };

        // 初始化摩斯密码表
        function initMorseTable() {
            const grid = document.getElementById('morseGrid');
            for (let letter in morseCode) {
                const item = document.createElement('div');
                item.className = 'morse-item';
                item.innerHTML = `
                    <div class="morse-letter">${letter}</div>
                    <div class="morse-code">${morseCode[letter]}</div>
                `;
                grid.appendChild(item);
            }
        }

        // 生成练习题（3个）
        function generateExercises() {
            // 字母转摩斯密码 - 3个
            const letterToMorse = document.getElementById('letterToMorse');
            const letters = ['H', 'E', 'L'];
            letters.forEach((letter, index) => {
                const item = document.createElement('div');
                item.className = 'exercise-item';
                item.innerHTML = `
                    <label>🔤 字母 ${letter} 的摩斯密码是：</label>
                    <input type="text" id="letter-${index}" placeholder="输入摩斯密码">
                `;
                letterToMorse.appendChild(item);
            });

            // 摩斯密码转字母 - 3个
            const morseToLetter = document.getElementById('morseToLetter');
            const morseExamples = ['...', '---', '.-'];
            morseExamples.forEach((code, index) => {
                const item = document.createElement('div');
                item.className = 'exercise-item';
                item.innerHTML = `
                    <label>📡 摩斯密码 ${code} 对应的字母是：</label>
                    <input type="text" id="morse-${index}" placeholder="输入字母" maxlength="1">
                `;
                morseToLetter.appendChild(item);
            });
        }

        // 登录功能
        function login() {
            const agentId = document.getElementById('agentId').value;
            if (agentId.length !== 5 || !/^\d{5}$/.test(agentId)) {
                showMessage('请输入正确的5位数字编号！');
                return;
            }
            
            document.getElementById('displayAgentId').textContent = agentId;
            document.getElementById('loginContainer').style.display = 'none';
            document.getElementById('mainContainer').style.display = 'block';
            
            initMorseTable();
            generateExercises();
        }

        // 文件选择处理
        function handleFileSelect(event) {
            const file = event.target.files[0];
            if (file) {
                document.getElementById('fileName').textContent = `已选择：${file.name}`;
            }
        }

        // 提交所有内容
        function submitAll() {
            // 收集所有数据
            const data = {
                agentId: document.getElementById('displayAgentId').textContent,
                exercises: {
                    letterToMorse: [],
                    morseToLetter: []
                },
                creativeText: document.getElementById('creativeText').value,
                fileName: document.getElementById('fileName').textContent
            };

            // 收集练习题答案（3个）
            for (let i = 0; i < 3; i++) {
                const input = document.getElementById(`letter-${i}`);
                if (input) data.exercises.letterToMorse.push(input.value);
            }

            for (let i = 0; i < 3; i++) {
                const input = document.getElementById(`morse-${i}`);
                if (input) data.exercises.morseToLetter.push(input.value);
            }

            // 显示成功消息
            document.getElementById('overlay').style.display = 'block';
            document.getElementById('successMessage').style.display = 'block';

            // 3秒后隐藏成功消息
            setTimeout(() => {
                document.getElementById('overlay').style.display = 'none';
                document.getElementById('successMessage').style.display = 'none';
            }, 3000);

            console.log('提交的数据：', data);
        }

        // 显示消息提示
        function showMessage(msg) {
            const msgDiv = document.createElement('div');
            msgDiv.style.cssText = `
                position: fixed;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                background: linear-gradient(135deg, #FF6B6B 0%, #FFA500 100%);
                color: white;
                padding: 20px 40px;
                border-radius: 20px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.3);
                z-index: 2000;
                animation: bounce 0.5s ease;
                font-size: 18px;
                font-weight: bold;
                border: 3px solid white;
            `;
            msgDiv.textContent = msg;
            document.body.appendChild(msgDiv);

            setTimeout(() => {
                msgDiv.remove();
            }, 3000);
        }

        // 回车键登录
        document.getElementById('agentId').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                login();
            }
        });

        // 添加页面加载动画
        window.addEventListener('load', function() {
            document.body.style.opacity = '0';
            setTimeout(() => {
                document.body.style.transition = 'opacity 0.5s';
                document.body.style.opacity = '1';
            }, 100);
        });
    </script>
</body>
</html>